<template>
	<div id="app">
		<el-row>
			<el-col :span="3">
				<el-card class="box-card1">
					<div class="text item">
						<div>
							<h1 style="margin-left: -120px;">{{this.registrationday}}</h1>
							<span style="margin-left: -100px;">今日挂号人次</span>
						</div>
						<div style="margin-right: -130px;margin-top: -80px;">
							<img src="../assets/totay_01.png" width="90px" height="90px" />
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="3">
				<el-card class="box-card2">
					<div class="text item">
						<div>
							<h1 style="margin-left: -120px;">{{this.medicalrecordday}}</h1>
							<span style="margin-left: -100px;">今日接诊人次</span>
						</div>
						<div style="margin-right: -130px;margin-top: -80px;">
							<img src="../assets/totay_02.png" width="90px" height="90px" />
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="3">
				<el-card class="box-card3">
					<div class="text item">
						<div>
							<h1 style="margin-left: -120px;">6500</h1>
							<span style="margin-left: -100px;">今日收入合计</span>
						</div>
						<div style="margin-right: -130px;margin-top: -80px;">
							<img src="../assets/totay_03.png" width="90px" height="90px" />
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="3">
				<el-card class="box-card4">
					<div class="text item">
						<div>
							<h1 style="margin-left: -120px;">{{this.vipday}}</h1>
							<span style="margin-left: -100px;">今日新增会员数</span>
						</div>
						<div style="margin-right: -130px;margin-top: -80px;">
							<img src="../assets/totay_04.png" width="90px" height="90px" />
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<div style="width: 200px;">
			<el-row>
				<el-col :span="6">
					<el-card class="box-card5" style="margin-right: -60px;margin-left: 20px;">
						<!-- <img src="../assets/tu1.png" width="900px" height="220px" /> -->
						<div slot="header" class="clearfix">
							<span style="float: left; padding: 3px 0;" type="text">诊所收入趋势</span>
							<!-- <el-radio value="redio"  border size="mini">近7天</el-radio>
							    <el-radio value="redio" border size="mini">近30天</el-radio> -->
							<div id="main" style="width: 900px;height: 250px;"></div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card class="box-card6">
						<div slot="header" class="clearfix">
							<span style="float: left; padding: 3px 0; font-size: 15px;" type="text">今日会员消费占比</span>

						</div>
						<!-- <span>
							<el-progress type="circle" :percentage="44.2"></el-progress>
						</span> -->
						<ve-ring height="230px" width="240px" :data="chartData" :extend="chartExtend" :settings="chartSettings">
						</ve-ring>
					</el-card>
				</el-col>
			</el-row>


		</div>



		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="float: left; padding: 3px 0;" type="text">今日门诊记录</span>
			</div>


			<div class="text item">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="id" label="序号">
					</el-table-column>
					<el-table-column prop="statusname" label="就诊状态">
						<template v-slot="scope">
							<span style="color: limegreen;">{{scope.row.statusname}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="serialnumber" label="患者编号">
					</el-table-column>
					<el-table-column prop="name" label="患者姓名">
					</el-table-column>
					<el-table-column label="性别">
						<template v-slot="scope">
							{{scope.row.sex==0?'女':'男'}}
						</template>
					</el-table-column>
					<el-table-column prop="age" label="年龄">
					</el-table-column>
					<el-table-column prop="phone" label="手机号码">
					</el-table-column>
					<el-table-column prop="typename" label="门诊类型">

					</el-table-column>
					<el-table-column prop="subname" label="科室">
					</el-table-column>
					<el-table-column prop="doctname" label="挂号医生">
					</el-table-column>
					<el-table-column prop="createtime" label="最后更新时间">
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
				 :page-sizes="[8, 16, 24, 32]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import echarts from 'echarts'
	export default {
		data() {
			//环形图
			this.chartSettings = {
					roseType: 'radius'
				},
				this.chartExtend = {
					legend: {
						show: true
					}, //隐藏legend
					series: {
						center: ['50%', '50%']
					}
				};
			return {



				chartData: {
					columns: ['消费', '比例'],
					rows: [{
							'消费': '会员消费',
							'比例': 2340 / 5000
						},
						{
							'消费': '非会员消费',
							'比例': 2660 / 5000
						},

					]
				},
				chartSettings: {
					//环图外半径与内半径
					radius: ['50px', '70px'],
					// roseType 显示为南丁格尔玫瑰图   默认不展示为南丁格尔玫瑰图，可设置为'radius', 'area'
					// roseType:"radius",

					//label  环图图形上的文本标签
					label: {
						//比例 指示
						formatter: params => {
							if (params.dataIndex === 0) {
								return `{a| 会员消费}`
								
							} else {
								return `{b| 非会员消费}`
							}
						},
						rich: {
							a: {
								color: '#438de7'
							},
							b: {
								color: '#7b7d86'
							}

						}
					},
					//itemStyle 标签的视觉引导线样式
					itemStyle: {

						color: seriesIndex => {
							if (seriesIndex.dataIndex === 0) {
								return {
									//xy 让色彩是水平的
									type: 'linear',
									x: 0,
									y: 1,
									x2: 0,
									y2: 0,
									//区域颜色 
									colorStops: [{
											offset: 0,
											color: '#28d094' // 环形0% 处的颜色
										},
										//区域颜色 ！！渐变
										/* ,
				               {
				                 offset: 0.5,
				                 color: 'yellow' // 100% 处的颜色
				               },
				               {
				                 offset: 0.7,
				                 color: 'blue' // 环形100% 处的颜色
				               },
				               {
				                 offset: 1,
				                 color: 'green' // 100% 处的颜色
				               } */
									],
									global: false // 缺省为 false
								};
							} else {
								return '#ff6262';
							}
						}

					}

				},



				//曲线图
				charts: '',
				/*  opinion: ["1", "3", "3", "4", "5"],*/
				opinionData: ["3000", "2000", "4000", "4000", "4300", "3300", "2240", "4600", "4300"],

				//今日新增会员数
				vipday:'',
				//今日接诊人数
				medicalrecordday:'',
				//今日挂号人次
				registrationday:'',
				current: 1,
				size: 8,
				total: 0,
				tableData: [],
				yarrayList: []

			}
		},
		created() {
			this.$nextTick(function() {
					this.drawLine('main')
				}),
				this.initData();

			//this.array();
			this.vipnum();
			this.medicalrecordnum();
			this.registrationnum();
		},
		methods: {
			//获取今日新增会员数
			vipnum(){
				this.axios.get('http://localhost:9999/medicalrecord/vipperson/vipnum').then(res=>{
					this.vipday=res.data.obj;
				})
			},
			//获取今日接诊人数
			medicalrecordnum(){
				this.axios.get('http://localhost:9999/medicalrecord/medicalrecord/num').then(res=>{
					this.medicalrecordday=res.data.obj;
				})
			},
			//今日挂号人次
			registrationnum(){
				this.axios.get('http://localhost:9999/medicalrecord/registration/regnum').then(res=>{
					this.registrationday=res.data.obj;
				})
			},
			//诊所收入趋势
			drawLine(id) {
				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({

					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['近七日收益']
					},
					grid: {

						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},

					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					//x轴
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ["12-01", "12-02", "12-03", "12-04", "12-05", "12-06", "12-07", "12-08", "12-09"]

					},
					//y轴
					yAxis: {
						type: 'value'
					},

					series: [{
						name: '近七日收益',
						type: 'line',
						stack: '总量',
						data: this.opinionData
					}]
				})
			},
			handleSizeChange(val) {
				this.size = val;
				this.initData();
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.current = val;
				this.initData();
				console.log(`当前页: ${val}`);
			},
			initData() {
				this.axios.get('http://localhost:9999/medicalrecord/medicalrecord/list', {
					params: {
						current: this.current,
						size: this.size
					}
				}).then(res => {
					this.tableData = res.data.obj.records;
					this.total = res.data.obj.total;
					console.log(res)
				});
			}
		}
	}
</script>
<style>
	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 1380px;
		margin-left: 20px;
		margin-right: 20px;
		margin-top: 30px;
	}

	.box-card1 {
		margin-left: 60px;
		width: 280px;
		height: 150px;
		margin-bottom: 20px;
	}

	.box-card2 {
		margin-left: 240px;
		width: 280px;
		height: 150px;
	}

	.box-card3 {
		margin-left: 430px;
		width: 280px;
		height: 150px;
	}

	.box-card4 {
		margin-left: 600px;
		width: 280px;
		height: 150px;
	}

	.box-card5 {
		width: 1005px;
		height: 300px;
	}

	.box-card6 {
		margin-left: 1050px;
		width: 255px;
		height: 200px;
	}
</style>
